import { messages } from "share/common";
/**
 * Created by 13576 on 2017/10/6.
 */
import React from 'react'
import { connect } from 'react-redux'
import { Affix, Popover, Button, message, Popconfirm, notification, Icon, Spin } from 'antd';
import "styles/budget/budget-journal/budget-journal-detail.scss";
import config from 'config';
import menuRoute from 'routes/menuRoute.js'
import BasicInfo from 'components/basic-info';
import SlideFrame from 'components/slide-frame';
import NewBudgetJournalDetail from 'containers/budget/budget-journal/new-budget-journal-detail';
import Importer from 'components/template/importer';
import budgetJournalService from 'containers/budget/budget-journal/budget-journal.service'
import Condition from 'components/condition'
const { If } = Condition;
import ResizeTable from 'components/resize-table'

class BudgetJournalDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isNew: true,
      params: {},
      loading: true,
      columnsSetFlag: true,
      commitLoading: false,
      data: [],
      listData: [],
      HistoryData: [],
      headerAndListData: {},
      headerData: {},
      showSlideFrameNew: false,
      updateState: false,
      buttonLoading: false,
      fileList: [],
      selectorItem: {},
      selectedRowKeys: [],
      rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        onChange: this.onSelectChange,
      },
      commitFlag: false,
      infoDate: {},
      templateUrl: '',
      uploadUrl: '',
      errorUrl: '',
      pageSize: 10,
      page: 0,
      total: 0,
      pagination: {
        current: 0,
        page: 0,
        total: 0,
        pageSize: 10,
      },
      handleData: [
        {
          type: 'list',
          id: 'company',
          options: [],
          labelKey: 'name',
          valueKey: 'id',
          columnLabel: 'companyName',
          columnValue: 'companyId'
        },//公司
        {
          type: 'list',
          id: 'unit',
          options: [],
          labelKey: 'name',
          valueKey: 'id',
          columnLabel: 'departmentName',
          columnValue: 'unitId'
        },//部门
        {
          type: 'list',
          id: 'employee',
          options: [],
          labelKey: 'userName',
          valueKey: 'userId',
          columnLabel: 'employeeName',
          columnValue: 'employeeId'
        },//人员
        {
          type: 'list',
          id: 'item',
          options: [],
          labelKey: 'itemName',
          valueKey: 'id',
          columnLabel: 'itemName',
          columnValue: 'itemId'
        },     //预算项目
        {
          type: 'select',
          id: 'periodName',
          options: [],
          labelKey: 'periodName',
          valueKey: 'periodName',
          columnLabel: 'periodName',
          columnValue: 'periodName'
        }, //期间
        {
          type: 'value_list',
          id: 'periodQuarter',
          options: [],
          labelKey: 'periodQuarter',
          columnLabel: 'periodQuarter',
          columnValue: 'periodQuarterName',
          value: 'periodQuarter'
        }, //季度
        {
          type: 'select',
          id: 'periodYear',
          options: [],
          labelKey: 'periodYear',
          valueKey: 'periodYear',
          columnLabel: 'periodYear',
          columnValue: 'periodYear'
        }, //年度
        {
          type: 'value_list',
          id: 'periodSemiannual',
          options: [],
          labelKey: 'periodSemiannual',
          valueKey: 'periodSemiannual',
          columnLabel: 'periodSemiannualName',
          columnValue: 'periodSemiannual'
        }, //半年度
        {
          type: 'select',
          id: 'currency',
          method: 'get',
          options: [],
          labelKey: 'currencyName',
          valueKey: 'currency',
          columnLabel: 'currency',
          columnValue: 'currency'
        }, //币种
        { type: 'input', id: 'rate', valueKey: 'rate' },  //汇率
        { type: 'inputNumber', id: 'amount', valueKey: 'amount' },  //金额
        { type: 'inputNumber', id: 'functionalAmount', valueKey: 'functionalAmount' }, //本位金额
        { type: 'inputNumber', id: 'quantity', valueKey: 'quantity' }, //数量
        { type: 'input', id: 'remark', valueKey: 'remark' }  //备注
      ],
      infoList: [
        /*状态*/
        { type: 'badge', label: messages('budget.key101'/*状态*/), id: 'status' },
        /*预算日记账编号*/
        { type: 'input', label: messages('budget.key102'/*预算日记账编号*/), id: 'journalCode', disabled: true },
        /*总金额*/
        { type: 'input', label: messages('budget.key112'/*总金额*/), id: 'totalAmount', disabled: true },
        /*申请人*/
        { type: 'input', label: messages('budget.key103'/*申请人*/), id: 'employeeName', disabled: true },
        /*公司*/
        { type: 'input', label: messages('budget.key85'/*公司*/), id: 'companyName', disabled: true },
        /*部门*/
        { type: 'input', label: messages('budget.key86'/*部门*/), id: 'unitName', disabled: true },
        /*备注*/
        {type: 'input', label: messages('common.remark')/*备注*/, id: 'description', disabled: false},
        /*创建时间*/
        { type: 'date', label: messages('budget.key104'/*创建时间*/), id: 'createdDate', disabled: true },
        /*预算日记账类型*/
        {
          type: 'list', id: 'journalType',
          listType: 'budget_journal_type',
          labelKey: 'journalTypeName',
          valueKey: 'journalTypeId',
          label: messages('budget.key105'/*预算日记账类型*/),
          listExtraParams: { organizationId: props.organization.id },
          disabled: true
        },
        /*预算表*/
        {
          type: 'select',
          id: 'budgetStructure',
          label: messages('budget.key106'/*预算表*/),
          options: [],
          method: 'get',
          disabled: true,
          getUrl: `${config.budgetUrl}/api/budget/structures/queryAll`,
          getParams: { organizationId: props.organization.id },
          labelKey: 'structureName',
          valueKey: 'id'
        },
        /*预算版本*/
        {
          type: 'list', id: 'versionName',
          listType: 'budget_versions',
          labelKey: 'versionName',
          valueKey: 'id',
          single: true,
          label: messages('budget.key108'/*版本*/),
          listExtraParams: { "organizationId": props.organization.id, "isEnabled": true }
        },
        /*预算场景*/
        {
          type: 'list', id: 'scenarioName',
          listType: 'budget_scenarios',
          labelKey: 'scenarioName',
          valueKey: 'id',
          single: true,
          label: messages('budget.key113'/*预算场景*/),  /*预算场景*/
          listExtraParams: { "organizationId": props.organization.id, "isEnabled": true }
        },
        /*编辑期段*/
        {
          type: 'value_list',
          id: 'periodStrategy',
          label: messages('budget.key109'/*编制期段*/),
          options: [],
          valueListCode: 2002,
          disabled: true
        },
        /*附件*/
        {
          type: 'file',
          label: messages('budget.key110'/*附件*/),
          id: 'file',
          disabled: true,
          showInSearch: true,
          fileSize: 10,
          maxNum: 9,
          token: props.authToken.access_token,
          attachmentType: 'BUDGET_JOURNAL',
          uploadUrl: `${config.baseUrl}/api/upload/static/attachment`,
          onChange: this.handleFileUpload,
          colSpan: 24,
          autoHeight: true
        }
      ],
      dimensionList: [],
      columns: [
        {          /*公司*/
          title: messages('budget.key85'/*公司*/), key: "companyName", dataIndex: 'companyName', width: '5%',
          render: companyName => (
            <Popover content={companyName}>
              {companyName}
            </Popover>)
        },
        {          /*部门*/
          title: messages('budget.key86'/*部门*/), key: "departmentName", dataIndex: 'departmentName', width: '5%',
          render: departmentName => (
            <Popover content={departmentName}>
              {departmentName}
            </Popover>)
        },
        {          /*员工*/
          title: messages('budget.key87'/*人员*/), key: "employeeName", dataIndex: 'employeeName', width: '5%',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {          /*预算项目*/
          title: messages('budget.key88'/*预算项目*/), key: "itemName", dataIndex: 'itemName', width: '10%',
          render: itemName => (
            <Popover content={itemName}>
              {itemName}
            </Popover>)
        },
        {          /*期间*/
          title: messages('budget.key89'/*期间*/), key: "periodName", dataIndex: 'periodName'
        },
        {          /*季度*/
          title: messages('budget.key90'/*预算季度*/), key: "periodQuarterName", dataIndex: 'periodQuarterName'
        },
        {          /*半年度*/
          title: messages('budget.key165')/*半年度*/, key: "periodSemiannualName", dataIndex: 'periodSemiannualName'
        },
        {          /*年度*/
          title: messages('budget.key91'/*预算年度*/), key: "periodYear", dataIndex: 'periodYear'
        },
        {          /*币种*/
          title: messages('budget.key92'/*币种*/), key: "currency", dataIndex: 'currency'
        },
        {          /*汇率*/
          title: messages('budget.key93'/*汇率*/),
          key: "rate",
          dataIndex: 'rate',
          render: rate => (
            <Popover content={rate}>
              {rate}
            </Popover>)
        },
        {          /*金额*/
          title: messages('budget.key94'/*金额*/),
          key: "amount",
          dataIndex: 'amount',
          width: 180,
          render: recode => (
            <Popover content={this.filterMoney(recode)}>
              {this.filterMoney(recode)}
            </Popover>)
        },
        {          /*本币今额*/
          title: messages('budget.key95'/*本币金额*/),
          key: "functionalAmount",
          dataIndex: 'functionalAmount',
          width: 180,
          render: recode => (
            <Popover content={this.filterMoney(recode)}>
              {this.filterMoney(recode)}
            </Popover>)
        },
        {          /*数字*/
          title: messages('budget.key96'/*数量*/), key: "quantity", dataIndex: 'quantity',
        },
        {          /*备注*/
          title: messages('budget.key97'/*行备注*/), key: "remark", dataIndex: 'remark',
          render: remark => (
            <Popover content={remark}>
              {remark}
            </Popover>)
        },
      ],

      showImportFrame: false,
      budgetJournalPage: menuRoute.getRouteItem('budget-journal', 'key'),    //预算日记账
      spinning: false
    };
  }

  handleFileUpload = value => {
    const { headerAndListData } = this.state;
    let attachmentOID = [];
    if (window.ISIE9) {
      value.map(item => attachmentOID.push(item.attachmentOID));
      this.setState({ attachmentOID, updateState: false })
    } else {
      attachmentOID = value;
    }
    headerAndListData.attachmentOID = attachmentOID;
    headerAndListData.dto.attachmentOID = attachmentOID;
    this.setState({ headerAndListData, updateState: false });
  };

  componentWillMount() {
    this.getBudgetJournalHead();
    this.getBudgetJournalLine();
  }

  //选项改变时的回调，重置selection
  onSelectChange = selectedRowKeys => {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = selectedRowKeys;
    this.setState({
      rowSelection,
      selectedRowKeys,
      selectedData: selectedRowKeys
    });
  };


  //删除预算日记账行
  handleDeleteLine = () => {
    let data = this.state.selectedRowKeys;
    let selectedRowKeys = [];
    data.map((item) => {
      if (item) {
        let id = { "id": item };
        selectedRowKeys.addIfNotExist(id)
      }
    });
    budgetJournalService.deleteBudgetJournalLine(selectedRowKeys).then(() => {
      this.getBudgetJournalLine();
      this.getToleAmount();
      message.success(`${messages('common.operate.success')}`);
      this.setState({
        selectedRowKeys: []
      })
    }).catch(() => {
      message.error(`${messages('common.operate.filed')}`);
    })
  };

  //根据attachmentOID，查询附件
  getFile = oids => {
    let services = oids.map(oid => budgetJournalService.getFileByAttachmentOID({ oid }));
    Promise.all(services).then(res => {
      const { fileList } = this.state;
      res.map(resItem => {
        fileList.addIfNotExist(resItem.data);
      });
      this.setState({ fileList })
    }).catch(e => {
      message.error(`${messages('budget.key98'/*获取附件失败*/)},${e.response.data.message}`);
    });
  };

  //根据预算表id，获得维度
  getDimensionByStructureId = (value) => {
    let params = {};
    params.isEnabled = true;
    params.structureId = value;
    budgetJournalService.getDimensionByStructureId(params).then((resp) => {
      this.setState({
        dimensionList: resp.data
      }, () => {
        //根据预算表，的维度.获取获取Columuns和获取维度的handleData数据
        this.getColumnsAndDimensionhandleData();
      })
    }).catch(e => {
      message.error(`${messages('budget.key114'/*获得维度失败*/)},${e.response.data.message}`);
    })
  };

  //根据预算表的维度.获取维度Columuns和获取维度的handleData数据
  getColumnsAndDimensionhandleData() {
    let columns = this.state.columns;
    let handleData = this.state.handleData;
    const dimensionList = this.state.dimensionList;
    for (let i = 0; i < dimensionList.length; i++) {
      const item = dimensionList[i];
      const priority = item.sequenceNumber;
      columns.push({
        title: `${item.dimensionName}`,
        key: `dimension${priority}ValueName`,
        id: `dimension${priority}ValueName`,
        dataIndex: `dimension${priority}ValueName`,
        render: recode => (
          <Popover content={recode}>
            {recode}
          </Popover>)
      });
      handleData.push({
        type: 'select',
        id: `dimension${priority}`,
        options: [],
        labelKey: 'id',
        valueKey: 'name',
        columnLabel: `dimension${priority}ValueName`,
        columnValue: `dimension${priority}ValueId`
      })
    }
    this.setState({
      columns,
      columnsSetFlag: false
    })
  }

  //获取日记账总金额
  getToleAmount() {
    let infoDate = this.state.infoDate;
    budgetJournalService.getTotalCurrencyAmount(this.props.params.journalCode).then((response) => {
      infoDate.totalAmount = response.data;
      this.setState(infoDate);
    })
  }

  //获取日记账头
  getBudgetJournalHead() {
    this.setState({ fileList: [], spinning: true });
    const journalCode = this.props.params.journalCode;
    budgetJournalService.getBudgetJournalHeaderDetil(journalCode).then(response => {
      let headerData = response.data;
      if (this.state.columnsSetFlag) {
        this.getDimensionByStructureId(headerData.structureId);
      }
      this.getFile(headerData.attachmentOID);
      const journalType = [];
      const journalType1 = {
        journalTypeName: headerData.journalTypeName,
        journalTypeId: headerData.journalTypeId,
      };
      journalType.push(journalType1);

      //预算版本
      const versionName = [];
      const versionName1 = {
        versionName: headerData.versionName,
        id: headerData.versionId
      };
      versionName.push(versionName1);

      //预算场景
      const scenarioName = [];
      const scenarioName1 = {
        scenarioName: headerData.scenario,
        id: headerData.scenarioId
      };
      scenarioName.push(scenarioName1);

      //预算表
      const budgetStructure = {
        label: headerData.structureName,
        value: headerData.structureId
      };

      //编制期段
      const period = headerData.periodStrategy;
      let periodObj = {
        YEAR: messages('budget.key115'/*年*/),
        QUARTER: messages('budget.key116'/*季度*/),
        MONTH: messages('budget.key117'/*月*/),
        SEMIANNUAL: messages('budget.key165')/*半年度*/
      };
      const periodStrategy = {
        label: periodObj[period],
        value: period
      };

      //状态
      let statusData = {};
      if (headerData.status === "NEW") {
        statusData = { status: 'processing', value: messages('budget.key167')/*编辑中*/ };
      } else if (headerData.status === "SUBMIT_RETURN") {
        statusData = { status: 'default', value: messages('budget.key99')/*撤回*/ };
      } else if (headerData.status === "REJECT") {
        statusData = { status: 'error', value: messages('budget.key168')/*审批驳回*/ };
      } else {
        statusData = { status: 'default', value: headerData.statusName };
      }

      //获取总金额
      const infoData = {
        ...headerData,
        status: statusData,
        journalType: journalType,
        versionName: versionName,
        scenarioName: scenarioName,
        budgetStructure: budgetStructure,
        file: this.state.fileList,
        periodStrategy: periodStrategy
      };
      const templateUrl = `${config.budgetUrl}/api/budget/journals/export/template?budgetJournalHeadId=${headerData.id}`;
      const uploadUrl = `${config.budgetUrl}/api/budget/journals/import?budgetJournalHeadId=${headerData.id}`;
      const errorUrl = `${config.budgetUrl}/api/budget/batch/transaction/logs/failed/export/budgetJournal/${headerData.id}`;
      let headerAndListData = {
        dto: response.data,
        list: [],
      };
      this.setState({
        templateUrl,
        uploadUrl,
        errorUrl,
        headerAndListData: headerAndListData,
        headerData: headerData,
        infoDate: infoData,
        spinning: false
      }, () => {
        this.getToleAmount();
      })
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({ spinning: false });
    })
  }

  //获取日记账行
  getBudgetJournalLine() {
    let params = {};
    params.page = this.state.page;
    params.size = this.state.pageSize;
    this.setState({
      loading: true,
    });
    const journalCode = this.props.params.journalCode;
    budgetJournalService.getBudgetJournalLineDetil(journalCode, params).then(response => {
      let listData = response.data;
      this.setState({
        loading: false,
        data: listData,
        commitFlag: listData.length > 0,
        pagination: {
          total: Number(response.headers['x-total-count']),
          onChange: this.onChangePager,
          current: this.state.page + 1
        }
      })
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({
        loading: false
      })
    })

  }


  //分页点击
  onChangePager = page => {
    if (page - 1 !== this.state.page)
      this.setState({
        page: page - 1,
        loading: true
      }, this.getBudgetJournalLine)
  };

  //保存编辑
  updateHandleInfo = value => {
    const headerAndListData = this.state.headerAndListData;
    headerAndListData.dto.versionId = value.versionName[0];
    headerAndListData.dto.scenarioId = value.scenarioName[0];
    headerAndListData.dto.description = value.description;
    if (value.description && value.description.length > 200) {
      message.error(messages('budget.key156')/*备注最多输入200个字符*/);
      return;
    }
    this.setState({
      headerAndListData: headerAndListData,
      updateState: true
    }, this.handleSaveJournal)
  };

  handleSaveJournal() {
    let headerAndListData = this.state.headerAndListData;
    this.setState({ spinning: true });
    budgetJournalService.addBudgetJournalHeaderLine(headerAndListData).then(() => {
      message.success(`${messages('common.operate.success')}`);
      this.getBudgetJournalHead();
      this.getToleAmount();
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({ spinning: false });
    })
  }

  showSlideFrameNew = value => {
    this.setState({
      showSlideFrameNew: value,
    })
  };

  showSlideFrameNewData = () => {
    let time = (new Date()).valueOf();
    let params = {
      isNew: true,
      periodStrategy: this.state.headerAndListData.dto.periodStrategy,
      structureId: this.state.headerAndListData.dto.structureId,
      journalTypeId: this.state.headerAndListData.dto.journalTypeId,
      time
    };
    this.setState({
      params: params,
    }, () => {
      this.showSlide(true);
    });

  };

  showSlide = value => {
    this.setState({
      showSlideFrameNew: value,
    })
  };

  //获得表单数据,保存或者修改
  handleAfterCloseNewSlide = value => {
    if (value) {
      this.setState({
        showSlideFrameNew: false,
      });
      let data = value;
      data.journalHeaderId = this.state.headerAndListData.dto.id;
      data.functionalAmount = data.functionalAmount.toString().replace(/,/g, "");
      budgetJournalService.addBudgetJournalLine(data).then(() => {
        message.success(`${messages('common.operate.success')}`);
        this.getBudgetJournalLine();
        this.getToleAmount();
      }).catch(e => {
        message.error(e.response.data.message)
      })
    }
  };

  //删除该预算日记账
  handleDeleteJournal = () => {
    const id = this.state.headerAndListData.dto.id;
    budgetJournalService.deleteBudgetJournal(id).then(() => {
      message.success(`${messages('common.operate.success')}`);
      //删除完该预算日记账，跳转
      let path = this.state.budgetJournalPage.url;
      this.context.router.push(path);
    }).catch(() => {
      message.error(`${messages('common.operate.filed')}`);
    })
  };

  //提交单据
  handlePut = () => {
    let header = this.state.headerAndListData.dto;
    if (header.formOid) {
      message.warning(messages('budget.key169')/*提交单据至工作流*/);
      //工作流
      this.setState({
        commitLoading: true
      });
      let header = this.state.headerAndListData.dto;
      let data = {
        applicantOID: header.applicatOiD,
        userOID: this.props.user.userOID,
        formOID: header.formOid,
        entityOID: header.documentOid,
        entityType: header.documentType,
        amount: 0,
        countersignApproverOIDs: null
      };
      if (this.state.commitFlag) {
        budgetJournalService.commitBudgetJournalWorkflow(data).then(() => {
          message.success(messages('budget.key170')/*提交成功*/);
          this.setState({
            listData: [],
            commitLoading: false
          });
          let path = this.state.budgetJournalPage.url;
          this.context.router.push(path);
        }).catch(e => {
          message.error(e.response.data.message);
          this.setState({
            commitLoading: false
          })
        })
      } else {
        notification.open({
          message: messages('budget.key171')/*行信息不能为空！*/,
          description: messages('budget.key172')/*添加或导入预算日记账行信息*/,
          icon: <Icon type="frown-circle" style={{ color: '#e93652' }} />
        });
      }
    } else {
      message.warning(messages('budget.key173')/*提交单据至复核*/);
      //非工作流
      if (this.state.commitFlag) {
        let header = this.state.headerAndListData.dto;
        budgetJournalService.commitBudgetJournal(header.id).then(() => {
          message.success(`${messages('common.operate.success')}`);
          this.setState({
            listData: [],
          });
          let path = this.state.budgetJournalPage.url;
          this.context.router.push(path);
        }).catch(e => { message.error(e.response.data.message) })
      } else {
        notification.open({
          message: messages('budget.key118'/*行信息不能为空*/),
          description: messages('budget.key119'/*请添加或导入预算日记账行信息*/),
          icon: <Icon type="frown-circle" style={{ color: '#e93652' }} />
        });
      }
    }
  };

  //编辑行前,数据处理，传入数据
  headleUpData(values) {
    let valuesData = {};
    const handData = this.state.handleData;
    handData.map((item) => {
      if (item.type === 'select' || item.type === 'value_list') {
        if (item.id === 'periodSemiannual') {
          valuesData[item.id] = values[item.columnValue];
        } else {
          valuesData[item.id] = values[item.columnLabel];
        }
      } else if (item.type === 'list') {
        let result = [];
        let itemData = {};
        if (values[item.columnValue]) {
          itemData[item.labelKey] = values[item.columnLabel];
          itemData[item.valueKey] = values[item.columnValue];
          itemData["key"] = values[item.columnValue];
          result.push(itemData);
        }
        valuesData[item.id] = result;
      } else if (item.type === 'input' || item.type === 'inputNumber') {
        valuesData[item.id] = values[item.valueKey];
      }
    });
    return valuesData;
  }

  //编辑行
  handlePutData = value => {
    let time = (new Date()).valueOf();
    let valuePutData = this.headleUpData(value);
    this.setState({
      params: {
        ...valuePutData,
        id: value.id,
        structureId: this.state.headerAndListData.dto.structureId,
        journalTypeId: this.state.headerAndListData.dto.journalTypeId,
        periodStrategy: this.state.headerAndListData.dto.periodStrategy,
        versionNumber: value.id,
        isNew: false,
        oldData: value,
        time: time
      }
    }, () => {
      this.showSlide(true);
    })
  };

  //返回预算日记账查询
  handleReturn = () => {
    let path = this.state.budgetJournalPage.url;
    this.context.router.push(path);
  };

  onLoadOk = transactionID => {
    budgetJournalService.confirmation(transactionID).then(() => {
      this.showImport(false);
      this.getBudgetJournalLine()
    });
  };

  showImport = flag => {
    this.setState({ showImportFrame: flag })
  };

  getApproveHistory(headerData) {
    let params = {};
    params.entityType = headerData.documentType;
    params.entityOID = headerData.documentOid;
    budgetJournalService.getBudgetJournalApproveHistory(params).then((request) => {
      this.setState({ "HistoryData": request.data }, () => {
      });
      message.success(messages('budget.key83'/*获取审批历史成功*/))
    }).catch((e) => {
      message.error(messages('budget.key84'/*获取审批历史失败*/));
    })
  }

  render() {
    const {
      loading, data, templateUrl, errorUrl, uploadUrl, columns,
      infoDate, infoList, updateState, showSlideFrameNew,
      rowSelection, showImportFrame, commitLoading, spinning
    } = this.state;
    return (
      <div className="budget-journal-detail">
        <Spin spinning={commitLoading}>
          <div className="budget-journal-cent">
            <BasicInfo
              spinning={spinning}
              infoList={infoList}
              infoData={infoDate}
              updateHandle={this.updateHandleInfo}
              updateState={updateState}
            />
            <div className="table-header">
              <div className="table-header-title">
                {messages('common.total', { total: `${this.state.pagination.total}` })}
              </div>
              <div className="table-header-buttons">
                <Button type="primary" onClick={this.showSlideFrameNewData}>
                  {messages('common.add')}
                </Button>
                <If value={!window.ISIE9}>
                  <Button type="primary" onClick={() => this.showImport(true)}>
                    {messages('budget.key120'/*导入*/)}
                  </Button>
                </If>
                <Importer
                  visible={showImportFrame}
                  templateUrl={templateUrl}
                  uploadUrl={uploadUrl}
                  errorUrl={errorUrl}
                  accept=".xlsx"
                  title={messages('budget.key121'/*导入*/)}
                  downFileName={messages('budget.key122'/*预算日记账导入*/)}
                  onOk={this.onLoadOk}
                  afterClose={() => this.showImport(false)}
                />
                <Popconfirm
                  title={messages("common.confirm.delete")/*确定要删除吗？*/}
                  onConfirm={this.handleDeleteLine}
                >
                  <Button className="delete" disabled={this.state.selectedRowKeys.length === 0}>
                    {messages('common.delete')}
                  </Button>
                </Popconfirm>
              </div>
            </div>
            <ResizeTable
              columns={columns}
              dataSource={data}
              rowKey={record => record.id}
              bordered
              size="middle"
              scroll={{ x: '200%' }}
              onRow={record => ({
                onClick: () => this.handlePutData(record)
              })}
              pagination={this.state.pagination}
              rowSelection={rowSelection}
              loading={loading}
            />

          </div>
          <SlideFrame
            title={messages('budget.key123'/*预算日记账*/)}
            show={showSlideFrameNew}
            content={NewBudgetJournalDetail}
            afterClose={this.handleAfterCloseNewSlide}
            onClose={() => this.showSlideFrameNew(false)}
            params={this.state.params}
          />
          <div className="divider"> </div>
          <Affix offsetBottom={0} className="bottom-bar">
            <Button type="primary" onClick={this.handlePut}>{messages('budget.key124'/*提交*/)}</Button>
            <Popconfirm
              title={messages("common.confirm.delete")/*确定要删除吗？*/}
              onConfirm={this.handleDeleteJournal}
            >
              <Button className="button-delete">{messages('budget.key125'/*删除该预算日记账*/)}</Button>
            </Popconfirm>
            <Button onClick={this.handleReturn}>{messages('common.back'/*返回*/)}</Button>
          </Affix>
        </Spin>
      </div>
    )
  }
}

BudgetJournalDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
    organization: state.login.organization,
    authToken: state.main.authToken
  }
}

export default connect(mapStateToProps)(BudgetJournalDetail);
